<template>
  <section>
      <div class="filter-container">
            <common-input @keyup.enter.native="handleFilter" class="w200" placeholder="账号名" v-model="listQuery.keyword" />
            <el-select size="mini" v-model="listQuery.status" clearable placeholder="全部状态" class="w100 ml10">
                <el-option
                        v-for="item in status_list"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">新增</el-button>
        </div>
      <el-table max-height="500"
                :data="list"
                style="width: 100%">
            
            <el-table-column align="center" label="账号名">
                <template slot-scope="scope">
                    <span>{{scope.row.username}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="角色">
                <template slot-scope="scope">
                    <span>{{scope.row.roleName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    <span>{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="备注">
                <template slot-scope="scope">
                    <span>{{scope.row.note}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <el-tag :type="getStatusColor(scope.row)">{{getStatusText(scope.row)}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-dropdown>
                        <el-button
                                type="text">
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-if="scope.row.roleId>0" @click.native="handleUpdate(scope.row)">编辑</el-dropdown-item>
                            <el-dropdown-item @click.native="handleModifyPassword(scope.row)">修改密码</el-dropdown-item>
                            <el-dropdown-item v-if="scope.row.roleId>0" @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[20,30, 50]" :page-size="listQuery.num" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px" @close="dialogClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="150px">
                <el-form-item label="账号名" prop="username">
                    <common-input v-model="form.username" placeholder="" />
                </el-form-item>
                <el-form-item v-if="!form.id" label="密码" placeholder="请输入密码" prop="password">
                    <common-input type="text" v-model="form.password"></common-input>
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <el-select size="mini" v-model="form.roleId" clearable placeholder="选择角色">
                        <el-option
                                v-for="item in role_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="item in status_list" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                    <common-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="" maxlength="100" v-model="form.note" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancel('form')">取消</el-button>
                <el-button size="mini" v-if="dialogStatus=='create'" type="primary" @click="create('form')">确定</el-button>
                <el-button size="mini" v-else type="primary" @click="update('form')">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改密码" :visible.sync="dialogPasswordVisible" :close-on-click-modal="false" :append-to-body="true" width="500px">
            <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
                <el-form-item label="密码" placeholder="请输入密码" prop="password">
                    <common-input type="password" v-model="passwordForm.password"></common-input>
                </el-form-item>
                <el-form-item label="确认密码" placeholder="确认密码需与密码一致" prop="confirmPassword">
                    <common-input type="password" v-model="passwordForm.confirmPassword"></common-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogPasswordVisible=false">取消</el-button>
                <el-button size="mini" type="primary" @click="updatePassword('passwordForm')">确定</el-button>
            </div>
        </el-dialog>
  </section>
</template>

<script>
    import {
        isPassword
    } from '../../utils/validator'
    import {
        agency_account_list,
        agency_role_list,
        agency_account_register,
        agency_account_detail,
        agency_account_update,
        agency_account_delete,
        agency_account_update_password
    } from '../../api/agency';
export default {
    components: {
    },
  data() {
    return {
        agencyId: 0,
        activeName: '0',
        list: null,
        listLoading: true,
        listQuery: {
            page: 1,
            num: 20,
            keyword: undefined,
            status: '',
            password: undefined,
        },
        status_list: [
            {
                value: 1,
                label: '可用'
            },
            {
                value: 2,
                label: '不可用'
            }
        ],
        total: null,
        dialogStatus: '',
        dialogFormVisible: false,
        textMap: {
            update: '编辑子账号',
            create: '新增子账号'
        },
        form: {
            id: undefined,
            name: undefined,
            note: undefined,
            status: 1,
            roleId: undefined,
            password: undefined,
        },
        rules: {
            username: [
                {
                    required: true,
                    message: '请输入账号名',
                    trigger: 'blur'
                }
            ],
            roleId: [
                {
                    required: true,
                    message: '请选择角色',
                    trigger: 'blur'
                }
            ],
            password: [
                {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },
                {
                    min: 5,
                    max: 20,
                    message: '长度在 5 到 20 个字符',
                    trigger: 'blur'
                },
                {
                    validator: isPassword,
                    trigger: 'blur'
                }
            ],
        },
        role_list: [],
        dialogPasswordVisible: false,
        passwordForm: {
            id: undefined,
            password: undefined,
            confirmPassword: undefined
        },
        passwordRules: {
            password: [
                {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },
                {
                    min: 5,
                    max: 20,
                    message: '长度在 5 到 20 个字符',
                    trigger: 'blur'
                }
            ],
            confirmPassword: [
                {
                    required: true,
                    message: '请输入确认密码',
                    trigger: 'blur'
                },
                {
                    min: 5,
                    max: 20,
                    message: '长度在 5 到 20 个字符',
                    trigger: 'blur'
                }
            ]
        }
    }
  },
  mounted() {
  },
        created() {
            this.getRoleList();
            this.getList();
        },

  methods: {
      getRoleList() {
        agency_role_list().then(res => {
            this.role_list = res.data;
        })

      },
    getList() {
        this.listLoading = true;
        agency_account_list(this.listQuery).then(response => {
            this.list = response.data.list;
            this.total = response.data.total;
            this.listLoading = false;
        })
    },
    handleCreate() {
        this.resetTemp();
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
    },
    resetTemp() {
        this.form = {
            id: undefined,
            username: undefined,
            note: undefined,
            status: 1,
            roleId: undefined,
            password: undefined,
            password: undefined,
        };
    },
    getStatusText(row) {
        if(row.status === 1) {
            return "可用"
        }

        return "不可用"
    },
    getStatusColor(row) {
        if(row.status === 1) {
            return "success"
        }

        return "danger"
    },
    create(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
            if (valid) {
                agency_account_register(this.form)
                    .then(() => {
                        this.dialogFormVisible = false;
                        this.getList();
                        this.$message.success("子账号创建成功");
                    })
            } else {
                return false;
            }
        });
    },
    update(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
            if (valid) {
                this.dialogFormVisible = false;
                this.form.password = undefined;
                agency_account_update(this.form.id, this.form).then(() => {
                    this.dialogFormVisible = false;
                    this.getList();
                    this.$message.success("子账号更新成功");
                });
            } else {
                return false;
            }
        });
    },
    cancel(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
    },
    handleUpdate(row) {
        agency_account_detail(row.id)
            .then(response => {
                this.form = response.data;
                this.dialogFormVisible = true;
                this.dialogStatus = 'update';
            });
    },
    handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                agency_account_delete(row.id)
                    .then(() => {
                        this.$message.success("子账号删除成功");
                        const index = this.list.indexOf(row);
                        this.list.splice(index, 1);
                    });
            }).catch(()=>{});
    },
    dialogClose() {
        this.$refs.form.resetFields();
    },
    handleFilter() {
        this.getList();
    },
    handleSizeChange(val) {
        this.listQuery.num = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
    },
    updatePassword(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
            if (valid) {
                agency_account_update_password(this.passwordForm).then(() => {
                    this.$message.success("密码已修改");
                    this.dialogPasswordVisible = false;
                });
            } else {
                return false;
            }
        });
    },
    handleModifyPassword(row) {
        this.passwordForm.username = row.username;
        this.dialogPasswordVisible = true;
    },
  }
};
</script>
